<!DOCTYPE html>
<html>
<style type=text/css>
.fileinput-button {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.fileinput-button input {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
}

.round_icon {
	width: 100px;
	height: 100px;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.round_new_icon {
	width: 100px;
	height: 100px;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.button {
	height: 30px;
	background: #FF5400;
	padding: 0 10px;
	font-size: 16px;
	color: #fff;
}
</style>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/static/css/index.css" rel="stylesheet">
<title>人员管理</title>
</head>
<body>


	<div class="inner-title">
		<h3 class="fn f14">
			<img src="/static/images/icon-1.png" alt="" /> 人员管理
		</h3>
	</div>

	<div class="inner-cont">
		<div class="bgf2 creat-wrap" id="newcom">
			<button class="creat-btn cf" onclick="add();">
				<img src="/static/images/icon-add.png" alt="" /> 新增人员
			</button>
		</div>

		<div class="mt30">
			<table border="0" class="table">
				<tr>
					<th width="74">序号</th>
					<th width="500">姓名</th>
					<th width="500">手机号码</th>
					<th width="500">身份</th>
					<th width="200">操作</th>
				</tr>

				<tbody id="table">
					<tr th:each="user,userStat:${users}">
						<td th:text="${userStat.index+1}"></td>
						<td th:text="${user.uName}"></td>
						<td th:text="${user.uTel}"></td>
						<td th:if="${user.uIdentity==1}" th:id="${user.uId}">主管理员</td>
						<td th:if="${user.uIdentity==2} and ${session.user.uIdentity==1}"
							th:id="${user.uId}">子管理员
							<button type="button" class="button"
								th:onclick="'javascript:permissionToExchange(\''+${user.uId}+'\',this);'">转让权限</button>
						</td>
						<td th:if="${user.uIdentity==2} and ${session.user.uIdentity!=1}"
							th:id="${user.uId}">子管理员
							</button>
						</td>
						<td th:if="${user.uIdentity==3}">员工</td>
						<td th:if="${user.uIdentity!=1}"><img
							src="/static/images/icon-edit.png" title="编辑"
							th:onclick="'javascript:upd(\''+${user.uId}+'\',this);'"
							style="cursor: pointer;" /> <img
							src="/static/images/icon-delete.png" title="删除"
							th:onclick="'javascript:del(\''+${user.uId}+'\',this);'"
							style="cursor: pointer;" /></td>
						<td th:if="${user.uIdentity==1}">不可操作</td>

					</tr>
				</tbody>
			</table>
			<div align="center" style="font-size: 18px; color: gray" id="page">

			</div>
		</div>

	</div>


	<!-- 弹窗 -->
	<div class="pop pa bgf5 hide">
		<span class="pa pop-shut"></span>
		<h3 class="cf pop-title">添加人员</h3>
		<div class="pop-cont">
			<form th:action="@{'/web/douserAdd/'+${cId}}"
				enctype="multipart/form-data" method="post" class="form form-2 f14"
				id="form">
				<table class="dialog-table">
					<tr id="esn">
						<td id="img"><span class="fileinput-button" id="input">
								<img src="/static/images/touxiang.png" id="jpg"
								class="round_icon" /> <input type="file"
								style="width: 100px; height: 100px;" id="imginput" name="uImg"
								accept=".jpg" />
						</span></td>
					</tr>
					<tr>
						<td><span>点击上方图标选择人脸头像</span></td>

					</tr>
					<tr>
						<td>姓名</td>
						<td><input type="text" id="uName" name="uName" /> <input
							type="hidden" name="uId" id="uId" /></td>
						<td></td>
					</tr>
					<tr>
						<td>手机号码</td>
						<td><input type="text" id="tel" name="uTel" /></td>
						<td></td>
					</tr>
					<tr>
						<td>身份</td>
						<td><input name="uIdentity" type="radio" value="2"
							id="guanliyuan" />管理员 <input name="uIdentity" type="radio"
							value="3" id="yuangong" checked="checked" />员工</td>
						<td></td>
					</tr>
					<tr>
						<td colspan="3">授权设备</td>
					</tr>
					<tr>
						<td colspan="3">
							<table>
								<tbody id="eqtable"></tbody>
							</table> <span id="eqpage"> </span>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><input type="hidden" id="submittype" value="add">
							<button id="btn_modifyOrCreate" type="submit">提交</button></td>
						<td></td>
					</tr>
				</table>
				<div align="center" style="font-size: 18px; color: gray" id="page">

				</div>
			</form>
		</div>
	</div>




	<script src="/static/js/jquery.js" type="text/javascript"></script>
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

	<script type="text/javascript">
			var count=0;
			$(function(){
				var pagenum=[[${pagemax}]];
				if (pagenum > 1) {
					for (var i = 1; i <= response.pagenum; i++) {
						if (i == 1) {
							$("#page").append('<button type="button" style="margin-left: 30px" onclick="page(this);" value="'+ i+ '">首页</button>');
						} else if (i == response.pagenum) {
							$("#page").append('<button type="button" style="margin-left: 30px" onclick="page(this);" value="'+ i+ '">尾页</button>');
						} else {
							$("#page").append('<button type="button" style="margin-left: 30px" onclick="page(this);" value="'+ i + '">' + i+ '</button>');
						}
				}
				}
				if([[${session.user.uIdentity}]]!=1){
					$("#newcom").remove();
				}
				// 展示弹窗
				
				// 关闭弹窗
				$('.pop-shut').on('click', function(e) {
					$(this).parent().hide();
				})
				
				 $("#imginput").change(function(e) {
            var imgBox = e.target;
            uploadImg($('#imginput'), imgBox)
        });
		var is;
        function uploadImg(element, tag) {
        	var file = tag.files[0];
			var imgSrc;
			if (file.type != "image/jpeg") {

				alert("仅支持jpg格式文件，请重新选择！");
				is = false;
				return false;
			}
			var reader = new FileReader();
			reader.readAsDataURL(file);
			if (is != false) {
				reader.onload = function() {
					console.log(this.result);
					imgSrc = this.result;
					var imgs = document.createElement("img");
					$(imgs).attr("src", imgSrc);
					$(imgs).attr("class", "round_new_icon");
					$(imgs).attr("id", "jpg");
					$("#jpg").remove();
					$("#input").prepend(imgs);
				};
		}
        }
				
			});
			function page(event){
				var a = $(event).val();
				if (a == 1) {
					count = 0;
				} else {
					count = (a - 1) * 20
				}
				$
						.ajax({
							url : "/web/getPageuser/" + a,
							success : function(response) {
								if (response.success) {
									$("#table").empty();
									$
											.each(
													response.data,
													function(i, user) {
														var identity;
														if (user.uIdentity == 1) {
															identity = "主管理员";
														} else if (user.uIdentity == 2) {
															identity = "子管理员";
														} else if (user.uIdentity == 3) {
															identity = "员工";
														}
														count++;
														$("#table")
																.append(
																		'<tr class="TR_STYLE1"><td class="TD_STYLE2">'
																				+ count
																				+ '</td><td class="TD_STYLE2">'
																				+ user.uName
																				+ '</td><td class="TD_STYLE2">'
																				+ user.uTel
																				+ '</td><td class="TD_STYLE2">'
																				+ identity
																				+ '<td class="TD_STYLE2"><a href="/web/usertoupd/'+user.uId+'"><img src="/static/images/bt_edit.gif" title="编辑" style="cursor:pointer;"/></a><img src="/static/images/bt_del.gif" title="删除"  onclick="del('
																				+ user.uId
																				+ ',this);" style="cursor:pointer;"/></td></tr>');

													});

								}
							},
							error : function() {
								alert("出现未知错误,请联系站内管理员!");
							}
						});
			}
			
			function upd(uid,event) {
				$("#eqtable").empty();
				$("#eqpage").empty();
				$.ajax({
					url:"/web/usertoupd/"+uid,
					success:function(response){
						if(response.success){
							var user=response.data;
							$("#jpg").attr("src","/img/"+user.uImg);
							$("#uName").val(user.uName);
							$("#tel").val(user.uTel);
							$("#uId").val(user.uId);
							$("#submittype").val(upd);
							if(user.uIdentity==2){
								$("#guanliyuan").attr("checked","checked");
							}else if(user.uIdentity==2){
								$("#yuangong").attr("checked","checked");
							}
							$("#form").attr("action","/web/userdoupd");
							$('.pop').show();
							$.ajax({
								url : "/web/getPageEquipments/[[${session.user.cId}]]/1",
								success : function(response) {
									if (response.success) {
										var count = 0;
										var st=user.eSn;
										var eid=new Array();
										eid=st.split('-');
										$.each(response.data, function(i, eq) {
											if (count % 3 == 0) {
												$("#eqtable").append('<tr>');
											}
											$("#eqtable").append(
													'<td><input type="checkbox" id="'+eq.sN+'" name="eSn" value="'+eq.eId+'"> '
															+ eq.eName + '</input></td>');
											if (count % 3 == 0) {
												$("#eqtable").append('</tr>');
											}
											count++;
											for(var j=0;j<eid.length;j++){
												var e=eid[j];
												if(e==eq.sN){
													$("#"+eq.sN).attr("checked","checked");
												}
											
											}
										});
										if (response.pagenum > 1) {
											for (var i = 1; i <= response.pagenum; i++) {
												$("#eqpage").append(
														'<button type="button" style="margin-left: 30px" onclick="updpage([[${session.user.cId}]],this);" value="'
																+ i + '">'+i+'</button>');
											}
										}
									}
								},
								error : function() {
									alert("出现未知错误,请联系站内管理员!");
								}

							});
						}
						
					},error:function(){
						
					}
				});
			}
			function add() {
				$("#eqtable").empty();
				$("#eqpage").empty();
				$("#submittype").val("add");
				$.ajax({
					url : "/web/getPageEquipments/[[${session.user.cId}]]/1",
					success : function(response) {
						if (response.success) {
							var count = 0;
							$.each(response.data, function(i, eq) {
								if (count % 3 == 0) {
									$("#eqtable").append('<tr>');
								}
								$("#eqtable").append(
										'<td><input type="checkbox" name="eSn" value="'+eq.eSn+'"> '
												+ eq.eName + '</input></td>');
								if (count % 3 == 0) {
									$("#eqtable").append('</tr>');
								}
								count++;
							});
							if (response.pagenum > 1) {
								for (var i = 1; i <= response.pagenum; i++) {
									$("#eqpage").append(
											'<button type="button" style="margin-left: 30px" onclick="eqpage(this);" value="'
													+ i + '">'+i+'</button>');
								}
							}
						}
					},
					error : function() {
						alert("出现未知错误,请联系站内管理员!");
					}

				});
				$('.pop').show();
				
			}
			function eqpage(event) {
				var a = $(event).val();
				if (a == 1) {
					count = 0;
				} else {
					count = (a - 1) * 20
				}
				$.ajax({
					url : "/web/getPageEquipments/[[${session.user.cId}]]/" + a,
					success : function(response) {
						if (response.success) {
							$("#eqtable").empty();
							var count = 0;
							$.each(response.data, function(i, eq) {
								if (count % 3 == 0) {
									$("#eqtable").append('<tr>');
								}
								$("#eqtable").append(
										'<td><input type="checkbox" name="eSn" value="'+eq.eId+'"> '
												+ eq.eName + '</input></td>');
								if (count % 3 == 0) {
									$("#eqtable").append('</tr>');
								}
								count++;
							});
						}
					},
					error : function() {
						alert("出现未知错误,请联系站内管理员!");
					}
				});
			}
			$.fn.validate = function(tips){
				var is=false;
			    if($(this).val() == "" || $.trim($(this).val()).length == 0){
			        alert(tips+"不能为空！");
			    }else{
			    	is=true;
			    }
			    return is;
			}


			$.fn.is = function(){
				var is=false;
			    if($(this).val() == "" || $.trim($(this).val()).length == 0){
			        alert("请选择人脸头像！");

			    }else{
			    	is=true;
			    }
			    return is;
			}


			$('#form').submit(function() {
					var result=false;
					var submittype=$("#submittype").val();
					if(submittype=="add"){
						if($("#imginput").is()==true&&$("#uName").validate("姓名")==true&&$("#tel").validate("手机号码")==true){
							result=true;
						}
				    	if($("#tel").val().length!=11){
							alert("请输入正确的手机号码");
							result=false;
						}else{
							result=true;
						}
						if(result==false){
							return false;
						}
					}else{
						if($("#uName").validate("姓名")==true&&$("#tel").validate("手机号码")==true){
							result=true;
						}
				    	if($("#tel").val().length!=11){
							alert("请输入正确的手机号码");
							result=false;
						}else{
							result=true;
						}
						if(result==false){
							return false;
						}
					}
			    	
			 
			});
			 function updpage(cid,event){
				 var a = $(event).val();
				 $("#eqtable").empty();
					$.ajax({
						url:"/web/companytoUpd/"+cid,
						success:function(response){
							if(response.success){
								var com=response.data;
								$.ajax({
									url : "/web/getPageEquipments/[[${session.user.cId}]]/"+a,
									success : function(response) {
										if (response.success) {
											var count = 0;
											var st=com.eSn;
											var eid=new Array();
											eid=st.split('-');
											$.each(response.data, function(i, eq) {
												if (count % 3 == 0) {
													$("#eqtable").append('<tr>');
												}
												$("#eqtable").append(
														'<td><input type="checkbox" id="'+eq.sN+'" name="eSn" value="'+eq.eId+'"> '
																+ eq.eName + '</input></td>');
												if (count % 3 == 0) {
													$("#eqtable").append('</tr>');
												}
												count++;
												for(var j=0;j<eid.length;j++){
													var e=eid[j];
													if(e==eq.sN){
														$("#"+eq.sN).attr("checked","checked");
													}
												
												}
											});
											
										}
									},
									error : function() {
										alert("出现未知错误,请联系站内管理员!");
									}

								});
							}
							
						},error:function(){
							
						}
					});
			 }
			 function permissionToExchange(uid) {
					$.ajax({
						url : "/web/permissionToExchange/" + uid,
						success : function(response) {
							if (response.success) {
								var admin=[[${session.user.uId}]];
								$("#"+admin).text("子管理员");
								$("#"+uid).text("主管理员");
								$(".button").remove();
								alert("操作成功，下次登录您将不再拥有主管理员权限");
							}
						},
						error : function() {
							alert("操作失败");
						}
					});
				}
			 function del(uid,event) {
					swal({
						  title: "确认删除",
						  text: "确认删除？",
						  icon: "warning",
						  buttons: ["取消", "确认"],
						  dangerMode: true,
						})
						.then((willDelete) => {
							$.ajax({
								url:"/web/deluser/"+uid,
								success:function(response){
									if(response.success){
										$(event).parent().parent().remove();
									}
								},error:function(){
									swal({
										  title: "删除失败",
										  text: "删除失败",
										  icon: "error",
										  buttons: [false, "确认"],
										  dangerMode: true
										});
								}
							});
						});
					
				}
</script>
</body>
</html>